<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 结合实际html结构--通配【合理】 */
			*{
				font: 16px "微软雅黑";
				/* 去掉内外边距 */
				margin: 0;
				padding: 0;
				/* 无序列表：有样式---“去一个样式，列表项” */
				list-style-type: none;
				/* 无序列表：有样式---【理解：简写】
				 去全部样式：list-style-tyle 去列表项样式
				           list-style-position去列表项标记位置样式
						   list-sytyle-image去列表项图片标记样式
				 */
				list-style: none;
			}
			/* 左栏效果
			1.左栏空间区域【aside】：235*450   背景颜色
			2.左栏区内容【li】  加权 235*50   相对定位--挂靠点【固定位置】
			3.给每个区域内容【li】加鼠标移动上去改背景颜色
			4.左栏弹出框  400*450  1px边框，绝对定位-微调
			*/
		   aside{
			   width: 235px;
			   height: 450px;
			   background: #ababab;
			   margin: 20px 50px;
		   }
		   aside ul.sidebar li{
			   width: 235;
			   height: 50px;
			   /* 相对定位--挂靠点 */
			   position:relative;
			   text-align: center;
			   line-height: 50px;
		   }
		   aside ul.sidebar li:hover{
			   background: #eee;
		   }
		   aside ul.sidebar div.out{
			   width: 400px;
			   height: 450px;
			   border: 1px solid red;
			   position: absolute;
			   left: 285px;
			   /* 显示与隐藏：JavaScript【JQuery框架】*/
			   display: none;
		   }
		</style>
	</head>
	<body>
		<!-- html结构：结构化标记【语义化标签】  
		aside元素  针对：左栏、广告、弹出效果.....  有利于SEO优化
		之前版本通过div+id起别名【缺点、繁琐、定义起名、冗余】
		 -->
		<aside>
		 	<ul class="sidebar">
				<!-- 弹出框 -->
				<div class="out"></div>
		 		<li>手机<span>></span></li>
		 		<li>电脑<span>></span></li>
		 		<li>家具<span>></span></li>
		 		<li>男装<span>></span></li>
		 		<li>女装<span>></span></li>
		 		<li>美妆<span>></span></li>
		 		<li>房产<span>></span></li>
		 		<li>母婴<span>></span></li>
		 		<li>食物<span>></span></li>
		 	</ul>
		</aside>
	</body>
</html>